import { Tooltip } from 'antd';
import moment from 'moment';
import React from 'react';

const RenderText = data => (
  <Tooltip placement="topLeft" title={data?.cellData}>
    <div className="ellipsis">{data?.cellData}</div>
  </Tooltip>
);

const titleTree = [
  {
    key: 'id',
    name: '序号',
    colspan: 1,
    rowspan: 1,
  },
  {
    name: '区域',
    key: 'businessDivisionName',
    colspan: 1,
    rowspan: 1,
  },
  {
    name: '城市',
    key: 'cityCompanyName',
    colspan: 1,
    rowspan: 1,
  },
  {
    name: '项目编码',
    key: 'projectCode',
    colspan: 1,
    rowspan: 1,
  },
  {
    name: '项目名称',
    key: 'projectName',
    colspan: 1,
    rowspan: 1,
  },
  {
    name: '分期编码',
    key: 'stageCode',
    colspan: 1,
    rowspan: 1,
  },
  {
    name: '分期名称',
    key: 'stageName',
    colspan: 1,
    rowspan: 1,
  },
  {
    name: '回款计划版本',
    key: 'signVersionName',
    colspan: 1,
    rowspan: 1,
  },
  {
    name: '版本状态',
    key: 'versionStateName',
    colspan: 1,
    rowspan: 1,
  },
  {
    name: '创建人',
    key: 'createByName',
    colspan: 1,
    rowspan: 1,
  },
  {
    name: '创建时间',
    key: 'createTime',
    colspan: 1,
    rowspan: 1,
  },
  {
    name: '创建方式',
    key: 'versionCreateName',
    colspan: 1,
    rowspan: 1,
  },
  {
    name: '审批通过时间',
    key: 'successApprovalTime',
    colspan: 1,
    rowspan: 1,
  },
  {
    name: '基于签约版本',
    key: 'sourceSignVersionName',
    colspan: 1,
    rowspan: 1,
  },
];
const fixedColumns = [
  {
    key: 'id',
    dataKey: 'id',
    width: 50,
    align: 'center',
    frozen: 'left',
    cellRenderer: ({ rowIndex }) => (
      <div style={{ width: '100%', textAlign: 'center', marginLeft: '-4px' }}>
        <span>{rowIndex + 1}</span>
      </div>
    ),
  },
  {
    key: 'businessDivisionName',
    dataKey: 'businessDivisionName',
    width: 100,
    frozen: 'left',
    cellRenderer: <RenderText />,
  },
  {
    key: 'cityCompanyName',
    dataKey: 'cityCompanyName',
    width: 100,
    cellRenderer: <RenderText />,
  },
  {
    key: 'projectCode',
    dataKey: 'projectCode',
    width: 150,
    cellRenderer: <RenderText />,
  },
  {
    key: 'projectName',
    dataKey: 'projectName',
    width: 180,
    cellRenderer: <RenderText />,
  },
  {
    key: 'stageCode',
    dataKey: 'stageCode',
    width: 150,
    cellRenderer: <RenderText />,
  },
  {
    key: 'stageName',
    dataKey: 'stageName',
    width: 80,
    cellRenderer: <RenderText />,
  },
  {
    key: 'returnPlanVersionName',
    dataKey: 'returnPlanVersionName',
    width: 150,
    cellRenderer: <RenderText />,
  },
  {
    key: 'versionStateName',
    dataKey: 'versionStateName',
    width: 100,
    cellRenderer: <RenderText />,
  },
  {
    key: 'createByName',
    dataKey: 'createByName',
    width: 110,
    cellRenderer: <RenderText />,
  },
  {
    key: 'createTime',
    dataKey: 'createTime',
    width: 110,
    dataGetter: ({ rowData }) => {
      if (rowData.createTime) {
        return moment(rowData.createTime).format('YYYY-MM-DD HH:mm');
      }
      return '';
    },
    cellRenderer: <RenderText />,
  },
  {
    key: 'versionCreateName',
    dataKey: 'versionCreateName',
    width: 70,
    align: 'center',
    cellRenderer: <RenderText />,
  },
  {
    key: 'successApprovalTime',
    dataKey: 'successApprovalTime',
    width: 110,
    dataGetter: ({ rowData }) => {
      if (rowData.successApprovalTime) {
        return moment(rowData.successApprovalTime).format('YYYY-MM-DD HH:mm');
      }
      return '';
    },
    cellRenderer: <RenderText />,
  },
  {
    key: 'sourceSignVersionName',
    dataKey: 'sourceSignVersionName',
    width: 185,
    cellRenderer: <RenderText />,
  },
];

export { titleTree, fixedColumns };
